<!--
带固定Top区域的scroll-view，上下滚动
MyTopScrollView的父元素一定要设置width,height

usage:
<template>
	<view class="" style="height: 100%; width: 100%;">
		<MyTopScrollView style="height: 50%; width: 100%;"> 
			<view slot="top">header1</view>
			<view slot="body">body1</view>
		</MyTopScrollView>
		<MyTopScrollView style="height: 50%; width: 100%;">
			<view slot="top">header2</view>
			<view slot="body">body2</view>
		</MyTopScrollView>
	</view>
</template>

<script>
	import MyTopScrollView from '@/components/my/MyTopScrollView.vue';
	export default {
		components: {
			MyTopScrollView
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";
	
	page {
		height: 100vh;
		width: 100%;
	}
</style>

-->

<template>
	<view style="position: relative; width: 100%; height: 100%; overflow: hidden; ">
		<view :style="_topStyle">
			<slot name="top"></slot>
		</view>
		<scroll-view class="MyTopScrollView-scrollview" scroll-y :style="_bodyStyle">
			<slot name="body"></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			topHeight: {
				type: String,
				required: false,
				default: "60rpx"
			},
			topStyle: {
				type: Object,
				required: false,
				default: function() { // 对于Array和Object，默认值要用函数返回
					return {
						'background-color': '#FFF',	// 设置表头的背景色
					}
				}
			},
			bodyStyle: {
				type: Object,
				required: false,
				default: function() { // 对于Array和Object，默认值要用函数返回
					return {
						'background-color': '#FFF',
					}
				}
			},
		},
		computed: {
			_topStyle() {
				return this.bindStyle(Object.assign(this.topStyle, {
					'position': 'absolute',
					'z-index': 1,
					'width': '100%',
					'height': this.topHeight,
				}));
			},
			_bodyStyle() {
				return this.bindStyle(Object.assign(this.bodyStyle, {
					'height': '100%',
					'padding-top': this.topHeight, 
					'box-sizing': 'border-box' // fix: 上面设置padding-top后，整体高度就变了，导致部分内容看不到。border-box是css3特性，可控制margin，padding不影响盒子宽高。
				}));
			}
		},
		methods: {
			bindStyle(style) {
				// #ifdef H5
				return style;
				// #endif
				// #ifndef H5
				let str = JSON.stringify(style);
				str = str.substr(1, str.length-2);
				str = str.replaceAll(",", ";");
				str = str.replaceAll("\"", "");
				return str;
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";
	.MyTopScrollView-scrollview {
		white-space: nowrap;
		overflow: hidden;
		// border: solid 2px red; // 调试
	}
</style>
